<template>
  <!-- tab基本信息表单  -->
  <el-scrollbar style="height: 100%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" class="form-input-m" inline-message>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="指南名称" prop="guidelines">
            <el-input v-model="formData.guidelines" placeholder="请输入指南名称" clearable> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年份" prop="year">
            <el-input v-model="formData.year" placeholder="请输入年份" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="测试方法" prop="testMethod">
            <el-input v-model="formData.testMethod" placeholder="请输入测试方法" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="效价" prop="potency">
            <el-input v-model="formData.potency" type="text" placeholder="请输入效价" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <!-- <el-form-item label="折点代码" prop="organismCode">
            <el-input v-model="formData.organismCode" placeholder="请输入折点代码" @change="autoInputCode" clearable>
            </el-input>
          </el-form-item> -->
          <el-form-item label="折点注释信息" prop="comments">
            <el-input v-model="formData.comments" type="text" placeholder="请输入折点注释信息" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="血清型" prop="serovarGroup">
            <el-input v-model="formData.serovarGroup" type="text" placeholder="请输入血清型" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="细菌代码" prop="whonetOrgCode">
            <el-input v-model="formData.whonetOrgCode" placeholder="请输入细菌代码" @change="autoInputCode" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="种" prop="speciesGroup">
            <el-input v-model="formData.speciesGroup" type="text" placeholder="请输入种" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="属" prop="genusCode">
            <el-input v-model="formData.genusCode" placeholder="请输入属" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="属分组" prop="genusGroup">
            <el-input v-model="formData.genusGroup" placeholder="请输入属" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="科" prop="familyCode">
            <el-input v-model="formData.familyCode" type="text" placeholder="请输入科" clearable> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流行病学临界值" prop="ecvEcoff">
            <el-input v-model="formData.ecvEcoff" type="text" placeholder="请输入流行病学临界值" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="厌氧类型" prop="anaerobe">
            <el-input v-model="formData.anaerobe" placeholder="请输入厌氧类型" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="亚界" prop="subkingdomCode">
            <el-input v-model="formData.subkingdomCode" type="text" placeholder="请输入亚界" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="折点类型" prop="breakpointType">
            <el-input v-model="formData.breakpointType" placeholder="请输入折点类型" @change="autoInputCode" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="宿主" prop="host">
            <el-input v-model="formData.host" type="text" placeholder="请输入宿主" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="感染部位" prop="siteOfInfection">
            <el-input v-model="formData.siteOfInfection" placeholder="请输入感染部位" @change="autoInputCode" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="参考表" prop="referenceTable">
            <el-input v-model="formData.referenceTable" type="text" placeholder="请输入参考表" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="WHONET抗生素代码" prop="whonetAbxCode">
            <el-input v-model="formData.whonetAbxCode" placeholder="请输入WHONET抗生素代码" @change="autoInputCode" clearable>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="WHONET测试代码" prop="whonetTest">
            <el-input v-model="formData.whonetTest" type="text" placeholder="请输入WHONET测试代码" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="SDD" prop="sdd">
            <el-input v-model="formData.sdd" placeholder="请输入SDD" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="耐药" prop="r">
            <el-input v-model="formData.r" type="text" placeholder="请输入耐药" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="中介" prop="i">
            <el-input v-model="formData.i" placeholder="请输入中介" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="敏感" prop="s">
            <el-input v-model="formData.s" type="text" placeholder="请输入敏感" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="ECV_ECOFF是否是暂定" prop="ecvEcoffTentative">
            <el-switch v-model="formData.ecvEcoffTentative" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="流行病学临界值" prop="ecvEcoff">
            <el-input v-model="formData.ecvEcoff" type="text" placeholder="请输入流行病学临界值" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="折点信息录入日期" prop="dateEntered">
            <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formData.dateEntered" type="date" placeholder="选择折点信息录入日期" />
          </el-form-item>

          <!-- <el-form-item label="折点信息的录入日期" prop="dateEntered">
            <el-input v-model="formData.dateEntered" placeholder="请输入折点信息的录入日期" @change="autoInputCode" clearable>
            </el-input>
          </el-form-item> -->
        </el-col>

        <el-col :span="12">
          <el-form-item label="折点信息修改日期" prop="dateModified">
            <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formData.dateModified" type="date" placeholder="选择折点信息修改日期" />
          </el-form-item>
          <el-form-item label="参考值" prop="ref">
            <el-input v-model="formData.ref" type="text" class="preserve-format" placeholder="参考值" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="流行病学临界值" prop="ecvEcoff">
            <el-input v-model="formData.ecvEcoff" type="text" placeholder="请输入流行病学临界值" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <!-- <el-button type="text" class="button-blue" @click="openEditExtraProperties"
              >配置扩展属性</el-button
            > -->
            <el-button type="primary" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 配置扩展属性弹框 -->
    <EditExtraProperties ref="EditExtraPropertiesRef" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType } from 'vue';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import EditExtraProperties from '../../../components/EditExtraProperties.vue'; //配置扩展属性弹框组件
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

const formRef = ref(); //表单ref标记
// 表单绑定的数据类型限制
// interface FormDataVO {
//   id: string /*主键*/;
//   guidelines: string /*指南名称*/;
//   year: Number /*年份*/;
//   testMethod: string /*测试方法*/;
//   potency: string /*测试物质的效力相关*/;
//   organismCode: string /*折点代码*/;
//   serovarGroup: string /*血清型组*/;
//   whonetOrgCode: string /*WHONET折点组织代码类型*/;
//   speciesGroup: string /*物种组代码类型*/;
//   genusCode: string /*属组代码类型*/;
//   familyCode: string /*科相关的代码类型*/;
//   anaerobe: string /*厌氧菌代码类型*/;
//   subkingdomCode: string /*结合ANAEROBE以及SUBKINGDOM_CODE进行判断*/;
//   breakpointType: string /*折点类型*/;
//   host: string /*宿主信息*/;
//   siteOfInfection: string /*描述感染部位*/;
//   referenceTable: string /*参考表格相关的信息*/;
//   whonetAbxCode: string /*WHONET抗生素代码*/;
//   whonetTest: string/*WHONET测试代码*/;
//   r: string /*耐药*/;
//   i: string /*中介*/;
//   sdd: string /*SDD*/;
//   s: string /*敏感*/;
//   ecvEcoff: string /*流行病学临界值*/;
//   ecvEcoffTentative: Boolean /*ECV_ECOFF是否是暂定*/;
//   dateEntered: string /*折点信息的录入日期*/;
//   dateModified: string /*折点信息的修改日期*/;
//   comments: string /*折点注释信息*/;
// }
// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  guidelines: 'User-defined' /*指南名称*/,
  year: '' /*年份*/,
  testMethod: '' /*测试方法*/,
  potency: '' /*效价*/,
  organismCode: '' /*折点代码*/,
  serovarGroup: '' /*血清型*/,
  whonetOrgCode: '' /*WHONET折点组织代码类型*/,
  speciesGroup: '' /*种*/,
  genusCode: '' /*属*/,
  genusGroup: '' /*属分组*/,
  familyCode: '' /*科*/,
  anaerobe: '' /*厌氧菌类型*/,
  subkingdomCode: '' /*结合ANAEROBE以及SUBKINGDOM_CODE进行判断*/,
  breakpointType: '' /*折点类型*/,
  host: '' /*宿主信息*/,
  siteOfInfection: '' /*描述感染部位*/,
  referenceTable: '' /*参考表格相关的信息*/,
  whonetAbxCode: '' /*WHONET抗生素代码*/,
  whonetTest: '' /*WHONET测试代码*/,
  r: '' /*耐药*/,
  i: '' /*中介*/,
  sdd: '' /*SDD*/,
  s: '' /*敏感*/,
  ecvEcoff: '' /*流行病学临界值*/,
  ecvEcoffTentative: false /*ECV_ECOFF是否是暂定*/,
  dateEntered: '' /*折点信息的录入日期*/,
  dateModified: '' /*折点信息的修改日期*/,
  comments: '', /*折点注释信息*/
  ref: ''/* 用户自定义 */
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  germNa: [{ required: true, message: '请输入名称' }],
  germNo: [{ required: true, message: '请输入代号' }]
});

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
  },
  {
    deep: true,
    immediate: true
  }
);

// 方法定义区 =============
function addNew() {
  console.log('新增');

  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 自动生成助记符
// function autoInputCode() {
//   formData.inputCode = funBdsJsResult('firstPinYinFun', formData.germNa);
// }

// 清空表单
function clearFormData() {
  formData.id = '',
    formData.guidelines = 'User-defined',
    formData.year = '',
    formData.testMethod = '',
    formData.potency = '',
    formData.organismCode = '',
    formData.serovarGroup = '',
    formData.whonetOrgCode = '',
    formData.speciesGroup = '',
    formData.genusCode = '',
    formData.familyCode = '',
    formData.anaerobe = '',
    formData.subkingdomCode = '',
    formData.breakpointType = '',
    formData.host = '',
    formData.siteOfInfection = '',
    formData.referenceTable = '',
    formData.whonetAbxCode = '',
    formData.whonetTest = '',
    formData.r = '',
    formData.i = '',
    formData.sdd = '',
    formData.s = '',
    formData.ecvEcoff = '',
    formData.ecvEcoffTentative = false,
    formData.dateEntered = '',
    formData.dateModified = '',
    formData.comments = '',
    formData.ref = ''
}

// 保存分管类别
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/bac-break-point/addBreakPoint';
    } else {
      url = '/bac-break-point/updateBreakPoint';
    }
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改折点成功', VxeNotifyType.success);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增折点成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改折点失败', VxeNotifyType.error);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增折点失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage('保存分管类别异常', VxeNotifyType.error);
        // if (callback) {
        //   callback(false);
        // }
      });
  });
}

</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}

.preserve-format {
  white-space: pre-wrap; /* 保留空格和换行，并支持自动换行 */
  font-family: monospace; /* 可选：使用等宽字体 */
}
</style>
